<template>
  <cv-dialog-form
    v-model:show="show"
    title="添加分类"
    @confirm="addDataService"
  >
    <cv-form :config="form" :data="formData">
      <template #parent="{ row }">
        <el-cascader
          v-model="row.parentId"
          :options="(shopGoodsCategoryCascader as any)"
          :props="{
            checkStrictly: true,
            label: 'categoryName',
            value: 'id',
          }"
          clearable
          @change="shopGoodsCategoryCascaderChange"
        />
      </template>
    </cv-form>
  </cv-dialog-form>
</template>

<script setup lang="ts">
import type { FormConfig } from '@/packages/components'
import { addReq, queryReq, updateReq } from '@/utils/http/code'

import { cloneFnJSON, useVModels } from '@vueuse/core'

import {
  getShopGoodsCategoryCascader,
  ShopGoodsCategoryCascader,
  addShopGoodsCategory,
  AddShopGoodsCategory,
  ShopGoodsCategoryTree,
} from '@/api/goods/admin-catrgory'
import { PropType } from 'vue'

const emit = defineEmits(['update:show', 'refreshTable'])
const props = defineProps({
  tableData: {
    type: Array as PropType<ShopGoodsCategoryTree[]>,
    default: () => [],
  },
  show: {
    type: Boolean,
    default: false,
  },
})
//const { } = toRefs(props);

const { show } = useVModels(props)

/**
 * 获取分类级联
 */
const shopGoodsCategoryCascader = ref<ShopGoodsCategoryCascader[]>([])
const initShopGoodsCategoryCascader = async () => {
  const res = await getShopGoodsCategoryCascader()
  shopGoodsCategoryCascader.value = res.data
  shopGoodsCategoryCascader.value.unshift({
    id: 0,
    parentId: 0,
    categoryName: '顶级分类',
  })
}
onMounted(() => {
  initShopGoodsCategoryCascader()
})
const shopGoodsCategoryCascaderChange = (e: any) => {
  formData.parentId = e[e.length - 1]
  console.log(e[e.length - 1])
}

/**
 * 添加商品分类数据
 * @param data
 * @param close
 */
const addDataService = async (data: AddShopGoodsCategory, close: Function) => {
  console.log(data, '添加数据')

  const res = await addShopGoodsCategory(data)

  addReq(res, () => {
    initShopGoodsCategoryCascader()
    emit('refreshTable')
    close()
  })

  //关闭弹窗
  //close()
}

const formData = reactive<AddShopGoodsCategory>({
  parentId: 0,
  categoryName: '',
  image: '',
  rank: 2,
  sort: 1,
  state: 1,
  homeReferral: 0,
})

/**
 *数据添加
 */
const form = reactive<FormConfig<AddShopGoodsCategory>>({
  items: [
    {
      type: 'slot',
      prop: 'parentId',
      label: '上级分类',
      rules: {
        required: true,
      },
      slotName: 'parent',
    },
    {
      type: 'input',
      prop: 'categoryName',
      label: '分类名称',
      rules: {
        required: true,
        type: 'string',
        max: 10,
      },
    },

    {
      type: 'image-upload',
      prop: 'image',
      label: '图片',
    },

    {
      type: 'input-number',
      prop: 'sort',
      label: '分类排序',
    },

    {
      type: 'switch',
      prop: 'state',
      label: '分类状态',
      rules: { required: false },
    },
    {
      type: 'switch',
      prop: 'homeReferral',
      label: '首页推荐',
      rules: { required: false },
    },
  ],
})
</script>
<style lang="scss" scoped></style>
